<!--
 * @Author: reiner850593913 lk850593913@gmail.com
 * @Date: 2022-09-10 10:56:19
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-16 14:26:58
 * @FilePath: \robot-management-web\src\views\patroling\PatrolingControl.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <MainContainer data-test="patroling-home">
    <el-container class="h-full">
      <el-header class="bg-[#072232] h-16">
        <PatrolingTop></PatrolingTop>
      </el-header>
      <el-container>
        <el-main class="p-0 relative">
          <PatrolingToolbar v-show="bottomTab === 1"></PatrolingToolbar>
          <PatrolingCamera :bottom-tab="bottomTab">
            <KeepAlive>
              <component :is="content" :key="content"></component>
            </KeepAlive>
          </PatrolingCamera>
          <PatrolingAside v-show="!isCollapse"></PatrolingAside>
        </el-main>
        <el-aside v-show="bottomTab === 0 || bottomTab === 1" class="w-6">
          <PatrolingCollapseButton
            v-model:isCollapse="isCollapse"
          ></PatrolingCollapseButton>
        </el-aside>
      </el-container>
      <el-footer
        class="bg-gradient-to-r from-[#012b43] via-[#0d517a] to-[#012b43] h-20 border-0 border-y border-solid border-[#1c91c7]"
      >
        <PatrolingBottom
          id="bottom"
          v-model:curTab="bottomTab"
        ></PatrolingBottom>
      </el-footer>
    </el-container>
    <audio ref="alarmRef" src="/unionAlarm.wav" type="audio/wav" hidden></audio>
  </MainContainer>
</template>

<script setup lang="ts">
import MainContainer from "@/components/MainContainer.vue";
import { computed, ref, watch } from "vue";
import PatrolingTop from "./PatrolingTop.vue";
import PatrolingBottom from "./PatrolingBottom.vue";
import PatrolingCarSwitch from "./PatrolingCarSwitch.vue";
import PatrolingSetting from "./PatrolingSetting.vue";
import PatrolingCollapseButton from "./PatrolingCollapseButton.vue";
import PatrolingAside from "./PatrolingAside.vue";
import PatrolingToolbar from "./PatrolingToolbar.vue";
import PatrolingMap from "./PatrolingMap.vue";
import useWebsocket from "@/composables/useWebsocket";
import PatrolingCamera from "./PatrolingCamera.vue";
import useNotify from "./composables/useNotify";

const notificationTypeMap = computed(() => {
  switch (notificationType.value) {
    case "warning":
      return {
        title: "警告",
        baseColor: "#fbde47",
        color: "#000",
      };
    case "error":
      return {
        title: "异常",
        baseColor: "#dd0612",
        color: "#fff",
      };
    default:
      return {
        title: "正常",
        baseColor: "#4d99f9",
        color: "#fff",
      };
  }
});

const notificationType = ref("");

const { handleNotification, handleWsClose, handleWsOpen } = useNotify({
  notificationTypeMap,
  notificationType,
});

useWebsocket({
  onMessage: handleNotification,
  onClose: handleWsClose,
  onError: handleWsClose,
  onOpen: handleWsOpen,
});

// 当前选中的底部菜单
const bottomTab = ref(3);
// 是否折叠侧边栏
const isCollapse = ref(true);

const content = computed(() => {
  switch (bottomTab.value) {
    case 0:
      return PatrolingMap;
    case 1:
      return PatrolingMap;
    case 2:
      return PatrolingSetting;
    case 3:
      return PatrolingCarSwitch;
    default:
      return PatrolingCarSwitch;
  }
});

watch(bottomTab, () => {
  isCollapse.value = true;
});
</script>

<style scoped lang="scss">
:deep(#bottom) {
  .el-notification {
    background-color: v-bind("notificationTypeMap.baseColor");
    width: 500px;
    padding-right: 40px;
    .message-container {
      border-width: 3px;
      border-style: solid;
      border-color: v-bind("notificationTypeMap.color");
      .message-type {
        background-color: v-bind("notificationTypeMap.color");
        color: v-bind("notificationTypeMap.baseColor");
        font-size: 30px;
        font-weight: bold;
        padding: 10px 0;
        text-align: center;
      }
      .message-content {
        font-size: 20px;
        color: v-bind("notificationTypeMap.color");
        font-weight: bold;
        font-family: Microsoft YaHei;
        word-wrap: break-word;
        padding: 10px;
        text-align: center;
      }
    }

    .el-notification__group {
      width: 100%;
      margin: 0;
      .el-notification__closeBtn {
        color: v-bind("notificationTypeMap.color");
      }
    }
  }
}
</style>
